<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
</head>

<body>
<div id="tips">吸附</div>

<table class="layui-hide" id="test" lay-filter="test"></table>
<div class="open">
 这是弹出层！
</div>

<form class="layui-form" action="">
	<div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-inline">
      <input type="text" name="title" style="width:300px" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证必填项</label>
    <div class="layui-input-inline">
      <select name="city" lay-verify="" id="roleList">
		  <option value="">请选择一个城市</option>
		  <option value="010">北京</option>
		  <option value="021">上海</option>
		  <option value="0571">杭州</option>
	</select>  
    </div>
  </div>
</form>


<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>

<script type="text/html" id="userListBar">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
	</script>

<script type="text/javascript" src="../layui/layui.js"></script>
<script>
layui.use(['table','form'], function(){
  var table = layui.table,form = layui.form;
  
  $.ajax({
	  url:'http://localhost:8080/ctp/role/0',
	  type:"get",
	  data:{},
	  success:function(result){
		  console.log(result);
		  var roleList = "";
  		for(var i  = 0;i < result.length;i++){
  			roleList += "<option value='"+result[i].id+"'>"+result[i].roleName+"</option>"
  		}
  		console.log(roleList);
  		$("#roleList").append(roleList);
  		form.render();
	  },
	  error:function(){
		  
	  }
  })
  
  table.render({
    elem: '#test'
    ,url:'/ctp/user/0'
    ,method:"GET"
    ,toolbar: '#toolbarDemo'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
    	{type:'checkbox'}
      ,{field:'id', width:80, title: 'ID', sort: true}
      ,{field:'userName', width:80, title: '用户名'}
      ,{field:'loginName', width:80, title: '登陆名'}
      ,{field:'gender', title: '性别', width: '30%', minWidth: 100,templet:function(d){
    	  if(d.gender == 1){
    		  return "女";
    	  }else if(d.gender == 2){
    		  return "男";
    	  }
    	  
      }}
      ,{title: '操作', minWidth:175, templet:'#userListBar',fixed:"right",align:"center"}
    ]]
  ,page:true
  });
  
  //头工具栏监听
  table.on('toolbar(test)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id);
	    console.log(obj);
	    switch(obj.event){
	      case 'getCheckData':
	        var data = checkStatus.data;
	        layer.alert(JSON.stringify(data));
	      break;
	      case 'getCheckLength':
	        var data = checkStatus.data;
	        layer.msg('选中了：'+ data.length + ' 个');
	      break;
	      case 'isAll':
	        layer.msg(checkStatus.isAll ? '全选': '未全选');
	      break;
	    };
	  });
  
//监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    console.log(obj);
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
    	
    	  layer.open({
    		  title: '在线调试'
    		,area: ['500px', '300px']
	   		  ,type:2
	   		  ,content: 'NewFile.html'
	   		  ,btn:['按钮一','按钮二','按钮三']
    	  		,yes:function(index,layro){
    	  			console.log("提交成功");
    	  			layer.closeAll();
    	  		},btn2: function(index, layero){
    	  		    //按钮【按钮二】的回调
    	  		    console.log("按钮二");
    	  		    return false; //开启该代码可禁止点击该按钮关闭
    	  		  }
    	  		  ,btn3: function(index, layero){
    	  		    //按钮【按钮三】的回调
    	  		    console.log("按钮三");
    	  		    //return false 开启该代码可禁止点击该按钮关闭
    	  		  }
    	  		  ,cancel: function(){ 
    	  		    //右上角关闭回调
    	  		    console.log("关闭");
    	  		    //return false 开启该代码可禁止点击该按钮关闭
    	  		  },end:function(){
    	  			  console.log("该窗体已关闭");
    	  		  }
    	  		,success:function(layero, index){
    	  			
    	  		}
    		}); 
    	
    		//提示框
    		/* layer.msg("这是提示框",{icon:1,time:1000,function(){
    			console.log(11111);
    		}}); */
    		
    		//吸附层
    		//layer.tips('只想提示地精准些', '#tips');
    	
      /* layer.prompt({
        formType: 2
        ,value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      }); */
    }
  });
  
});
</script>
</body>
</html>